<!--参数配置-->
<template>
  <div class="allBox">
    <div class="webPageTitle">充提币控制</div>
    <div class="leftTitle">
      <div style="float: right;width: 480px"  class="myFromBox" >
        <Input v-model="selectCoinType" style="width: 180px" placeholder="请输入币种"/>
        <Input v-model="selectCoinName" style="width: 180px"  placeholder="请输入币名称"/>
        <Button slot="append" icon="ios-search" @click="selectData(1)" ></Button>
      </div>

    </div>
    <div style="float: left;width: 100%;">
      <Table highlight-row border :loading="loading" :columns="tableColumns" :data="tableData" ></Table>
    </div>
    <div  class="pageBox" >
      <template>
        <Button type="primary" @click="insertButtom = true" style="float: left;margin-left: 5.5%">添加</Button>
        <Modal
          v-model="insertButtom"
          title="添加"
          @on-ok="saveData('add')"
          @on-cancel="">
          <p style="margin-top: 10px;font-size: 14px">币代码:</p>
          <Input v-model="newData.coinType" size="large" ></Input>
          <p style="margin-top: 10px;font-size: 14px">币名称:</p>
          <Input v-model="newData.coinName" size="large"  ></Input>
          <!--图标-->
          <p style="margin-top: 10px;font-size: 14px">图标地址:</p>
          <div class="imgBoxImg">
            <input type="file" class="uploadBox" id="fileOne" @change="filechange('fileOne','imgOne','tishiOne')">
            <img src="../../assets/close.png" id="imgOne">
          </div>
          <p style="text-align: center;height: 20px;" id="tishiOne"></p>
          <!--图标-->
          <p style="margin-top: 10px;font-size: 14px">是否可充值:</p>
          <RadioGroup v-model="newData.rechargeFlag" @on-change="radioReChange">
            <Radio v-for="item in radioList" :label="item.label" :key="item.label">{{ item.value }}</Radio>
          </RadioGroup>
          <p style="margin-top: 10px;font-size: 14px">是否可提现:</p>
          <RadioGroup v-model="newData.withdrawFlag" @on-change="radioWiChange">
            <Radio v-for="item in radioList" :label="item.label" :key="item.label">{{ item.value }}</Radio>
          </RadioGroup>
          <p style="margin-top: 10px;font-size: 14px">是否显示MEMO:</p>
          <RadioGroup v-model="newData.memoFlag" @on-change="radioMeChange" >
            <Radio v-for="item in radioList" :label="item.label" :key="item.label">{{ item.value }}</Radio>
          </RadioGroup>
          <p style="margin-top: 10px;font-size: 14px">最小提币数量:</p>
          <Input v-model="newData.withdrawMinValue" size="large"  ></Input>
          <p style="margin-top: 10px;font-size: 14px">最大提币数量:</p>
          <Input v-model="newData.withdrawMaxValue" size="large"  ></Input>
          <p style="margin-top: 10px;font-size: 14px">提币手续费数量:</p>
          <Input v-model="newData.withdrawFeeValue" size="large"  ></Input>
          <p style="margin-top: 10px;font-size: 14px">提币手续费率:</p>
          <Input v-model="newData.withdrawFeeRate" size="large"  ></Input>

        </Modal>
      </template>

      <template>
        <Modal
          v-model="updateButtom"
          title="修改"
          @on-ok="saveData('update')"
          @on-cancel="">
          <p style="margin-top: 10px;font-size: 14px">币代码:</p>
          <Input v-model="updateData.coinType" size="large" ></Input>
          <p style="margin-top: 10px;font-size: 14px">币名称:</p>
          <Input v-model="updateData.coinName" size="large"  ></Input>
          <!--图标-->
          <p style="margin-top: 10px;font-size: 14px">图标地址:</p>
          <div class="imgBoxImg">
            <input type="file" class="uploadBox" id="fileTwo" @change="filechange('fileTwo','imgTwo','tishiTwo')">
            <img src="../../assets/close.png" id="imgTwo">
          </div>
          <p style="text-align: center;height: 20px;" id="tishiTwo"></p>
          <!--图标-->
          <p style="margin-top: 10px;font-size: 14px">是否可充值:</p>
          <RadioGroup v-model="updateData.rechargeFlag" @on-change="radioReChange">
            <Radio v-for="item in radioList" :label="item.label" :key="item.label">{{ item.value }}</Radio>
          </RadioGroup>
          <p style="margin-top: 10px;font-size: 14px">是否可提现:</p>
          <RadioGroup v-model="updateData.withdrawFlag" @on-change="radioWiChange">
            <Radio v-for="item in radioList" :label="item.label" :key="item.label">{{ item.value }}</Radio>
          </RadioGroup>
          <p style="margin-top: 10px;font-size: 14px">是否显示MEMO:</p>
          <RadioGroup v-model="updateData.memoFlag" @on-change="radioMeChange"  >
            <Radio v-for="item in radioList" :label="item.label" :key="item.label">{{ item.value }}</Radio>
          </RadioGroup>
          <p style="margin-top: 10px;font-size: 14px">最小提币数量:</p>
          <Input v-model="updateData.withdrawMinValue" size="large"  ></Input>
          <p style="margin-top: 10px;font-size: 14px">最大提币数量:</p>
          <Input v-model="updateData.withdrawMaxValue" size="large"  ></Input>
          <p style="margin-top: 10px;font-size: 14px">提币手续费数量:</p>
          <Input v-model="updateData.withdrawFeeValue" size="large"  ></Input>
          <p style="margin-top: 10px;font-size: 14px">提币手续费率:</p>
          <Input v-model="updateData.withdrawFeeRate" size="large"  ></Input>

        </Modal>
      </template>

      <Modal v-model="deleteBut " width="360">
        <p slot="header" style="color:#f60;text-align:center">
          <Icon type="information-circled"></Icon>
          <span>删除确认</span>
        </p>
        <div style="text-align:center">
          <p>此参数信息配置删除后将无法恢复！</p>
          <p>是否继续删除？</p>
        </div>
        <div slot="footer">
          <Button type="error" size="large" long   :loading="deleteBut_loading"  @click="deleteData">删除</Button>
        </div>
      </Modal>
      <!--读取API错误-->
      <template>
        <Modal v-model="redAPIModal" width="360">
          <p slot="header" style="color:#f60;text-align:left">
            <Icon type="information-circled"></Icon>
            <span>{{redAPIModalTit}}</span>
          </p>
          <div style="text-align:left">
            <p>错误信息：</p>
            <p>{{redAPIModalCen}}</p>
          </div>
          <div slot="footer">
            <Button type="error" size="large" long  @click="redAPIModalFun">确定</Button>
          </div>
        </Modal>

      </template>

      <Page :total="total" :page-size="rows" show-total @on-change="selectData" class="pageStyle"></Page>
    </div>
  </div>
</template>
<script>

  export  default {
    data(){
      return{
        deleteBut_loading:false,
        deleteBut:false,
        updateButtom:false,                                        //修改控制按钮
        insertButtom: false,                                       //添加控制按
        selectCoinType:'',                                             //要查询的字段
        selectCoinName:'',
        tableColumns:[
          {title:'序号',type: 'index1', width: 60, align: 'center',render: (h, params) => {
              return h('span', params.index + (this.showPage- 1) * this.rows + 1);
            }},
          {title:'币代码',key:'coinType',align: 'center'},
          {title:'币名称',key:'coinName',align: 'center'},
          {
            title:'图标',
            key:'logoImg',
            align: 'center',
            width:75,
            render:(h,params) =>{
              return h('div',[
                h('img',{
                  props:{

                  },
                  style:{
                    width:'30px',
                    height:'30px',
                    float:'left',
                    fontSize:'20px'
                  },
                  attrs:{
                    src:params.row.logoImg,
                    title:params.row.coinName,
                    alt:'/'
                  }
                })
              ])
            }
          },
          {title:'是否可充币',key:'rechargeFlagStr',align: 'center'},
          {title:'是否可提币',key:'withdrawFlagStr',align: 'center'},
          {title:'是否显示memo',key:'memoFlagStr',align: 'center'},
          {title:'提币最小量',key:'withdrawMinValue',align: 'center'},
          {title:'提币最大量',key:'withdrawMaxValue',align: 'center'},
          {title:'提币手续费量',key:'withdrawFeeValue',align: 'center'},
          {title:'提币手续费率',key:'withdrawFeeRate',align: 'center'},
          {
            title: '操作',
            key: 'action',
            width: 300,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.showUpdate(params.row)
                    }
                  }
                }, '修改'),

                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.deletePop(params.row.coinType)
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ],                                                            //表构造
        tableData:[],                                                  //数据
        deleteCoinType:'',                                            //删除的id
        /*分页*/
        rows:5,                                                     //每页条数
        total:0,                                                  //总数量
        loading:true,
        newData:[],
        updateData:[],
        showPage:'',
        redAPIModal:false,
        redAPIModalTit:'',
        redAPIModalCen:'',
        radioList:[
          {label : "1",value : "是"},
          {label : "0",value : "否"}
        ]
      }
    },
    methods:{
      /*打开删除弹窗*/
      deletePop:function (key) {
          this.deleteBut  = true;
          this.deleteCoinType = key;
      },
      radioReChange(obj) {
        if (obj != undefined){
          this.updateData.rechargeFlag=obj;
        }
      },
      radioWiChange(obj){
        if (obj != undefined){
          this.updateData.withdrawFlag=obj;
        }
      },
      radioMeChange(obj){
        if (obj != undefined){
          this.updateData.memoFlag=obj;
        }
      },
      /*读取数据*/
      selectData: function (page) {
        this.showPage=page;
        let _self = this;
        _self.$http.get(_self.service +'/coin/contr/list',{params:{
          page:page,
          rows:_self.rows,
          coinType:_self.selectCoinType,
          coinName:_self.selectCoinName
        }}).then(function (res) {
          if(res.data.code == '001'){
           // _self.$Message.success("数据读取成功！");
            let datas =  res.data.result.data;
            for(let i in datas) {

              let rechargeFlag = datas[i].rechargeFlag;
              if(rechargeFlag == 1){
                rechargeFlag = '是';
              }else {
                rechargeFlag = '否';
              }
              datas[i].rechargeFlagStr = rechargeFlag;

              let withdrawFlag = datas[i].withdrawFlag;
              if(withdrawFlag == 1){
                withdrawFlag = '是';
              }else {
                withdrawFlag = '否';
              }
              datas[i].withdrawFlagStr = withdrawFlag;

              let memoFlag = datas[i].memoFlag;
              if(memoFlag == 1){
                memoFlag = '是';
              }else {
                memoFlag = '否';
              }
              datas[i].memoFlagStr = memoFlag;

            }

            _self.tableData = datas;
            _self.total = res.data.result.total;
            _self.loading = false;
          }else{
            _self.modalFun('读取参数配置信息错误',res.data.msg)
          }
        })

      },
      /*打开*/
      showUpdate:function (obj) {
        let _self = this;
        _self.updateButtom=true;                                     //修改控制按钮
        _self.updateData = obj;
        _self.updateData.rechargeFlag = obj.rechargeFlag.toString();
        _self.updateData.withdrawFlag = obj.withdrawFlag.toString();
        _self.updateData.memoFlag = obj.memoFlag.toString();
        document.getElementById('imgTwo').src = obj.logoImg;
      },
      /*删除数据*/
      deleteData: function () {
        let _self = this;
        _self.$http.post(_self.service + '/coin/contr/delete',{
          coinType:_self.deleteCoinType
        }).then(function (res) {
          if(res.data.code == '001'){
            _self.$Message.success("删除成功！");
            _self.deleteBut_loading = false;
            _self.deleteBut = false;
            _self.selectData(_self.showPage);
          }else{
            _self.modalFun('删除参数配置信息错误',res.data.msg)
          }
        })

      },
      /*添加数据*/
      saveData:function (type) {
        let _self = this;
        let data = _self.updateData;
        let url = '/coin/contr/update';
        let newimg = document.getElementById('imgTwo');
        data.logoImg = newimg.src; //获取阿里云图片src
        if (type == 'add'){
          url = '/coin/contr/add';
          data = _self.newData;
          newimg = document.getElementById('imgOne');
          data.logoImg = newimg.src; //获取阿里云图片src
        }

        if(data.coinType.replace(/(^\s*)|(\s*$)/g, "" ) == ""){
          this.$Message.warning('币代码不能为空！')
          return
        }
        if(data.coinName.replace(/(^\s*)|(\s*$)/g, "" ) == ""){
          this.$Message.warning('币名称不能为空！')
          return
        }
        if(data.logoImg.replace(/(^\s*)|(\s*$)/g, "" ) == ""){
          this.$Notice.warning({
            title: '请选择图片!',
          });
          return
        }
        _self.$http.post(_self.service + url,data).then(function (res) {
          if(res.data.code == '001'){
            _self.$Message.success("操作成功！");
            _self.emptyAdd();
            _self.selectData('1')
          }else{
            _self.modalFun('添加参数配置信息错误',res.data.msg)
          }
        })
      },
      /*清空添加input*/
      emptyAdd:function () {
        this.newData = [];
      },
      /*获取浏览器高度对 table的 row 显示进行数量控制 */
      tableRowH:function(){
          let _self = this;
          let winHeight = document.documentElement.clientHeight;
          _self.rows = Math.floor((winHeight - (40+50+50+100))/48)-1;
      },
      /*Modal弹出层*/
      modalFun:function (modTit,modCen) {
        this.redAPIModal = true;
        this.redAPIModalTit = modTit;
        this.redAPIModalCen = modCen;
      },
      redAPIModalFun:function () {
        this.redAPIModal = false
      },

      /*------------------------------------------------------*/
      filechange:function(file,pic,tishi){
        let fileObj = document.getElementById(file);
        let windowURL = window.URL || window.webkitURL;
        let dataURL;
        let imgup = document.getElementById(pic);
        if(fileObj && fileObj.files && fileObj.files[0]){
          dataURL = windowURL.createObjectURL(fileObj.files[0]);
          imgup.src=dataURL;
        }
        this.upload(file,pic,tishi);
      },
      upload : function (file,pic,tishi) {
        let inputfile = document.getElementById(file);
        if(inputfile.files.length=='0'&&pic=='imgTh'){
          this.$Message.error({
            content:  this.$t('qscsp'),
            duration: 1
          });
          return
        }
        if(inputfile.files.length=='0'){
          this.$Message.error({
            content:  this.$t('xuanzezp'),
            duration: 1
          });
          return
        }
        let url = this.uploadFile(file,pic,tishi);
      },
  },
    created:function(){
      this.tableRowH();
      this.selectData('1')
    },
  }


</script>
<style>



  .pageBox{
    float: left;
    width: 100%;
    margin-top: 10px
  }
  .pageStyle{
    float: right;
    margin-right: 20px;
    margin-bottom: 10px;
  }



  .uploadBox{
    width: 80px;
    height:  80px;
    position: absolute;
    overflow: hidden;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    z-index: 1000;
  }
  .mustNote{color: red;font-size: 18px}
  .imgBoxImg{
    position: relative;
    width: 80px;
    height:  80px;
    border: 1px dashed  #999 ;
    border-radius: 5px;
  }
  .imgBoxImg:hover{
    border: 1px dashed green;
    border-radius: 5px;

  }
  .imgBoxImg img{
    width: 100%;
    height: 100%;
  }

</style>
